<template>
	<view class="search-container">
		<view class="search-box">
			<input type="text" v-model="val" placeholder="搜索标题" @click="search" />
		</view>
		<view class="add-btn" @click="add">
			<text class="icon-add" style="position:relative;left: 12px;">添加动态</text>
		</view>
		<view class="filter-container">
			<view class="dropdown-trigger">
				<view class="isaction-item" :class="{ active: currentFilter === 'classify'}" data-filter="classify"
					@click="toggleDropdown">
					{{ currentOption.label }}
				</view>
			</view>
			<view class="filter" @click="bindFilterTap">
				<text :class="{ active: currentFilter === 'all' }" data-filter="all">全部</text>
				<text :class="{ active: currentFilter === 'normal' }" data-filter="normal">正常</text>
				<text :class="{ active: currentFilter === 'forbidden' }" data-filter="forbidden">停用</text>
				<text :class="{ active: currentFilter === 'newest' }" data-filter="newest">最新</text>
				<text :class="{ active: currentFilter === 'recommend' }" data-filter="recommend">首页推荐</text>
				<text :class="{ active: currentFilter === 'top' }" data-filter="top">置顶</text>
			</view>
		</view>
		<view class="dropdown-menu" v-if="isDropdownOpen">
			<view class="menu-item" v-for="option in options" :key="option.value" @click="selectOption(option)">
				{{ option.label }}
			</view>
		</view>
	</view>
	<view class="main-admin bg-admin">
		<view class="admin-comm-list">
			<view v-if="isAdmin && isLoad">
				<view class="load text-grey" v-if="dataList.length === 0">暂无记录哦~</view>
				<view class="load text-grey" v-if="dataList.length > 0">共有{{ dataList.length }}条符合条件记录</view>

				<view class="item" v-for="(item, index) in dataList" :key="item.id">
					<view class="no">{{ index + 1 }}</view>
					<view class="header">
						<view class="left text-cut">{{ item.title }}</view>
						<view class="right">
							<text class="text-green" v-if="item.state == 0">正常</text>
							<text class="text-red" v-if="item.state == 1">禁用</text>
						</view>
					</view>

					<view class="info title-mid">
						<view class="info-item">
							<view class="title">分类</view>
							<view class="mao">：</view>
							<view class="content">{{ item.classify }}</view>
						</view>

						<view class="info-item">
							<view class="title">序列号</view>
							<view class="mao">：</view>
							<view class="content">{{ item.sequence }}<text style="color: #808080;">(小的先显示)</text>
							</view>
						</view>

						<view class="info-item">
							<view class="title">创建</view>
							<view class="mao">：</view>
							<view class="content">{{ item.date }}</view>
						</view>

						<view class="oprt">
							<view class="btn margin-right-s" @click="update(item.id)">
								<text class="icon-edit margin-right-xxs"></text>编辑
							</view>
							<view class="btn margin-right-s" @click="isState(item.id)">
								<!-- <view class="btn margin-right-s" @click="state = true"> -->
								<text class="icon-edit margin-right-xxs"></text>状态管理
							</view>
							<view class="btn margin-right-s" @click="isShowModal(item.id)">
								<!-- <view class="btn margin-right-s" @click="showModal = true"> -->
								<text class="icon-delete margin-right-xxs text-orange"></text>更多操作
							</view>
							<view class="btn margin-right-s" @click="preview(item.id,item.classify)">
								<text class="icon-delete margin-right-xxs text-orange"></text>预览
							</view>
						</view>
						<!-- 弹出框结构 更多操作 -->
						<view v-show="showModal" class="overlay" @click="overlayClick(item.id)">
							<view class="action-modal" @click.stop>
								<view class="action-modal-content">
									<view class="action-item" @click="handleAction('preview',item.id,item.classify)">预览
									</view>
									<view class="action-item" @click="handleAction('top',item.id)">置顶</view>
									<view class="action-item" @click="handleAction('handleAction',item.id)">推荐到首页
									</view>
									<view class="action-item" @click="handleAction('CreateCustomQRCode',item.id)">
										生成专属二维码</view>
									<view class="action-item" @click="showModal = false">取消</view>
								</view>
							</view>
						</view>
						<!-- 弹出框结构 状态管理 -->
						<view v-show="state" class="overlay" @click="overlayClick">
							<view class="action-modal" @click.stop>
								<view class="action-modal-content">
									<view class="action-item" @click="status('preview',item.id)">启用</view>
									<view class="action-item" @click="status('Deactivated',item.id)">停用(不可见)</view>
									<view class="action-item" @click="status('deleteDynamic',item.id)">删除</view>
									<view class="action-item" @click="state = false">取消</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- <import src="../../../tpls/public/list_load_tpl.wxml" />
				<template is="listLoadTpl" :data="dataList" /> -->
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		Allrank,
		updDynamicState
	} from '@/request/api.js';
	import {
		onLoad,
		onShow
	}
	from '@dcloudio/uni-app';
	import {
		gonavigateTo
	} from '@/request/wx.js'


	const dataList = ref([]); //最新动态数据
	const isSuperAdmin = ref(false);
	const isAdmin = ref(true);
	const isLoad = ref(true);
	const currentFilter = ref('all'); // 初始化当前过滤器为空
	const isDropdownOpen = ref(false);
	const currentOption = ref({
		label: '分类',
		value: 'all'
	});
	const options = ref([{
			label: '全部分类',
			value: 'all'
		},
		{
			label: '最新动态',
			value: 'Dynamic'
		},
		{
			label: '服务介绍',
			value: 'introduce'
		}
	]);
	const val = ref('');

	//搜索跳转获取
	onShow(async () => {
		// 从本地存储中获取名为'result'的数据
		isDropdownOpen.value = false;
		showModal.value = false;
		state.value = false;
		const result = uni.getStorageSync('result');
		val.value = result
		// 检查result是否为非空字符串
		if (typeof result === 'string' && result.trim() !== '') {
			currentFilter.value = "搜索";
			const response = await Allrank({ // 调用rank函数并等待其完成
				'text': "search",
				'result': result
			});
			show(response); // 显示rank函数的响应结果
		} else {
			console.log('输入为空');
		}
		// 不管result是否为空，都从本地存储中删除'result'数据
		uni.removeStorageSync('result');

		// 输出result的值，用于调试
		console.log(result);
	});

	onMounted(async () => {
		try {
			const response = await Allrank({
				text: currentFilter.value
			});
			show(response);
		} catch (error) {
			// 打印捕获到的错误
			console.error("请求失败:", error);
		}
	});

	function show(response) {
		console.log(response.data.data)
		dataList.value = response.data.data;
	}

	function toggleDropdown() {
		isDropdownOpen.value = !isDropdownOpen.value;
	}

	async function selectOption(option) {
		// console.log(option.label)
		// console.log(option.value)
		currentOption.value = option;
		val.value = '';
		currentFilter.value = "classify";
		isDropdownOpen.value = false;
		const response = await Allrank({
			text: option.value
		});
		show(response);
	}

	async function bindFilterTap(event) {
		const filterType = event.target.dataset.filter;
		currentOption.value = {
			label: '分类',
			value: 'all'
		};
		isDropdownOpen.value = false;
		val.value = '';
		if (filterType != undefined) {
			// console.log("被点击的过滤器:", filterType);
		} else {
			// console.log("点击了空白的地方")
			return
		}
		currentFilter.value = filterType; // 更新当前过滤器
		const response = await Allrank({
			text: currentFilter.value
		});
		show(response);
	}

	function search() {
		gonavigateTo(`/pages/admin/Dynamic/search/admin_Dynamic_search?tid=${5}`)
	}

	function add() {
		uni.navigateTo({
			url: '/pages/admin/Dynamic/add/admin_Dynamic_add'
		});
	}

	function update(id) {
		console.log(id)
		gonavigateTo(`/pages/admin/Dynamic/update/admin_Dynamic_update?id=${id}`)
	}

	let stateid = 0;

	function isState(id) {
		state.value = true;
		stateid = id;
		console.log(id)
	}

	function isShowModal(id) {
		showModal.value = true;
		stateid = id;
		console.log(id)
	}

	const showModal = ref(false); // 控制弹出框显示的变量
	const state = ref(false);
	// 处理弹出框中的操作
	function handleAction(data, id, type) {
		console.log(`操作类型：${data}, 动态ID：${stateid}, 分类：${type}`);
		const str = {
			id: stateid,
			type: data
		};
		showModal.value = false; // 假设这是一个全局状态，用于控制模态框的显示
		console.log(`按钮被点击了：${data}`);

		switch (data) {
			case 'preview': //预览
				uni.navigateTo({
					url: `/pages/admin/Dynamic/preview/admin_Dynamic_preview?id=${stateid}&type=${type}`
				});
				return;
			case 'top': //置顶
			case 'HomeRecommended': //推荐到首页
				// 这里可以执行置顶和推荐到首页的逻辑
				handleUpdate(str);
				break;
			case 'CreateCustomQRCode': //生成专属二维码
				console.log(`进来了：${data}`);
				uni.navigateTo({
					url: `/pages/admin/index/xcxrwm`
				});
				// 这里可以添加生成二维码的逻辑
				return;
			default:
				console.log('未知操作');
				break;
		}
		console.log("操作完成");
	}

	// 处理状态更新
	function status(data) {
		console.log(stateid);
		const str = {
			id: stateid,
			type: data
		};
		state.value = false; // 控制某个状态
		console.log(`按钮被点击了：${data}`);

		switch (data) {
			case 'preview': // 启用
			case 'Deactivated': // 停用(不可见)
				handleUpdate(str);
				break;
			case 'deleteDynamic': // 删除
				handleDelete(str);
				return;
			default:
				console.log('未知操作');
				break;
		}
		console.log("操作完成");
	}

	// 更新动态状态
	function handleUpdate(str) {
		console.log(`进来了：id，${str.id}:type，${str.type}`);
		updDynamicState(str).then((res) => {
			console.log(res);
			if (res.data.code === 200) {
				console.log(res.data.data);
				Allrank({
					text: currentFilter.value
				}).then((res) => {
					console.log(res.data.data);
					dataList.value = res.data.data;
				});
			} else {
				console.log(res.data.msg);
			}
		}).catch((error) => {
			console.error('更新状态失败', error);
		});
	}

	// 处理删除操作
	function handleDelete(str) {
		console.log(`进来了：${str.type}`);
		uni.showModal({
			content: '确认删除?删除不可恢复',
			success: function(res) {
				if (res.confirm) {
					console.log('用户点击确定');
					handleUpdate(str);
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	}

	// 点击覆盖层时的处理函数
	function overlayClick(id) {
		// console.log(id);
		// 不进行任何操作，以阻止点击事件冒泡到覆盖层
	}

	function preview(id, type) {
		console.log(id);
		uni.navigateTo({
			url: `/pages/admin/Dynamic/preview/admin_Dynamic_preview?id=${id}&type=${type}`
		})
	}
</script>
<style scoped>
	.main-admin {
		/* width: 100%; */
		padding: 30rpx 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		box-sizing: border-box;
		margin-bottom: 100rpx;
		background-color: #cecece33;
	}

	.admin-comm-list {
		position: relative;
		width: 100%;
		/* padding: 0rpx 20rpx 0rpx; */
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
	}

	.load.text-grey {
		color: #999 !important;
	}

	.admin-comm-list .item {
		/* width: 100%; */
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		background-color: #fff;
		border-radius: 5rpx;
		overflow: hidden;
		margin-bottom: 30rpx;
		position: relative;
		border: 1rpx solid #ccc;
	}

	.admin-comm-list .item .no {
		position: absolute;
		bottom: 0;
		right: 10rpx;
		z-index: 99999;
		font-size: 38rpx;
		font-weight: bold;
		color: #ccc;
		opacity: .5;
		z-index: 100;
	}

	.admin-comm-list .item:last-child {
		margin-bottom: 0;
	}

	.admin-comm-list .item .header {
		/* width: 100%; */
		font-size: 28rpx;
		text-align: left;
		line-height: 2.6;
		padding: 0 15rpx;
		display: flex;
		background-color: #f2f2f2;
		justify-content: space-between;
		align-items: center;
	}

	.admin-comm-list .item .header .left {
		flex: 1;
		font-size: 29rpx;
		text-align: left;
		line-height: 2.6;
		padding: 0 5rpx;
		text-align: left;
		font-weight: bold;
	}

	.admin-comm-list .item .header .right {
		min-width: 100rpx;
		text-align: right;
	}

	.admin-comm-list .item .info {
		width: 100%;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		background-color: #fff;
		min-height: 150rpx;
		padding: 15rpx 20rpx 30rpx;
		position: relative;
	}

	.admin-comm-list .item .info .info-item {
		width: 100%;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		background-color: #fff;
		line-height: 1.5;
		font-size: 26rpx;
		margin-bottom: 16rpx;
	}

	.admin-comm-list .item .info .info-item .title {
		width: 110rpx;
		color: #333;
		text-align: right;
		font-weight: bold;
	}

	.admin-comm-list .item .info .info-item .mao {
		color: #333;
		text-align: left;
		margin-right: 10rpx;
	}

	.admin-comm-list .item .info .info-item .content {
		flex: 1;
		/* color: #555; */
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		display: flex;
		flex-wrap: wrap;
	}

	.text-red {
		color: var(--adminRedColor) !important;
	}

	.title {
		font-weight: bold;
		/* 字体加粗 */
	}

	.text-red {
		color: red !important;
		/* 字体颜色设置为红色 */
	}

	.content.text-bold.text-red {
		font-weight: bold;
		/* 字体加粗 */
	}

	.text-green {
		color: #008000;
		/* 标准的绿色 */
	}

	.text-red {
		color: red;
		/* 红色 */
	}

	.oprt {
		display: flex;
		/* justify-content: center;
   margin-top: 20px; */
	}

	.btn {
		display: flex;
		align-items: center;
		padding: 5px 18px;
		border-radius: 4px;
		background-color: #f0f0f0;
		color: #333;
		margin-right: 10px;
		cursor: pointer;
		transition: background-color 0.3s;
		font-size: 11px;
	}

	.btn:hover {
		background-color: #e0e0e0;
	}

	.icon-edit,
	.icon-roundclose,
	.icon-delete {
		margin-right: 6px;
	}

	.text-orange {
		color: #f56c6c;
	}

	.text-red {
		color: red;
	}

	/* 特定操作按钮的样式 */
	.btn-edit {
		color: #409eff;
	}

	.btn-status {
		color: #67c23a;
	}

	.btn-delete {
		color: #f56c6c;
	}

	/* 当鼠标悬停在按钮上时的样式 */
	.btn-edit:hover {
		background-color: #409eff;
		color: #fff;
	}

	.btn-status:hover {
		background-color: #67c23a;
		color: #fff;
	}

	.btn-delete:hover {
		background-color: #f56c6c;
		color: #fff;
	}

	.load.text-grey {
		font-size: 14px;
		/* 设置字体大小 */
		color: #909399;
		/* 设置字体颜色为浅灰色 */
		text-align: center;
		/* 文本居中 */
		margin-bottom: 15px;
		/* 与下方元素的间距 */
		line-height: 1.5;
		/* 行高，增加阅读体验 */
	}


	.search-container {
		/* display: flex; */
		justify-content: space-between;
		align-items: center;
		margin-top: 7px;
		/* 距离顶部5px */
		padding-left: 10px;
		/* 距离左边10px */
		max-height: 77px;
	}

	.search-box {
		flex-grow: 1;
		display: flex;
		align-items: center;
		border: 1px solid #dcdfe6;
		/* 边框颜色 */
		border-radius: 4px;
		/* 圆角 */
		padding: 0px 15px;
		/* 内边距调整为更紧凑 */
		background-color: #fff;
		/* 背景色 */
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		/* 轻微阴影 */
		max-width: 202px;
		/* 设置搜索框的最大宽度 */
	}

	.search-box input {
		flex-grow: 1;
		border: none;
		padding: 6px 0;
		font-size: 14px;
		/* 字体大小 */
		color: #606266;
		/* 字体颜色 */
	}

	.search-box button {
		padding: 0 10px;
		background-color: #2196F3;
		/* 按钮背景色 */
		color: #fff;
		/* 字体颜色 */
		border: none;
		border-radius: 4px;
		/* 圆角 */
		cursor: pointer;
		font-size: 14px;
		/* 字体大小 */
		outline: none;
		/* 移除焦点轮廓 */
	}

	.search-box button:hover {
		background-color: #1e88e5;
		/* 鼠标悬停时的背景色 */
	}

	.add-btn {
		padding: 6px 10px;
		background-color: #2196F3;
		/* 按钮背景色 */
		color: #fff;
		/* 字体颜色 */
		border: none;
		border-radius: 4px;
		/* 圆角 */
		cursor: pointer;
		font-size: 14px;
		/* 字体大小 */
		outline: none;
		/* 移除焦点轮廓 */
		max-width: 86px;
		position: relative;
		top: -35px;
		left: 246px;
	}

	.add-btn:hover {
		background-color: #1e88e5;
		/* 鼠标悬停时的背景色 */
	}


	/* 分类 */
	.filter-container {
		display: flex;
		/* justify-content: center; 水平居中 */
		position: relative;
		font-weight: bold;
		top: -16px;
		/* left: -84px; */
		min-width: 500px;
	}

	.filter {
		display: flex;
		font-weight: bold;
		padding-bottom: 5px;
		/* 水平排列 */
	}

	.filter text {
		margin: 0 6px;
		/* 每个文本之间的间距 */
		cursor: pointer;
		/* 鼠标悬停时的手势 */
		transition: color 0.3s;
		padding-bottom: 4px;
		/* 颜色变化的过渡效果 */
	}

	.filter text.active {
		color: #2196F3;
		border-bottom: 3px #2196F3 solid;
		/* 被选中的文本颜色为蓝色 */
	}

	.dropdown-trigger {
		position: relative;
		display: inline-block;
		cursor: pointer;
	}

	.isaction-item.active {
		color: #2196F3;
		/* 被选中的文本颜色为蓝色 */
	}

	.dropdown-menu {
		position: absolute;
		background-color: #ffffff;
		border: 1px solid #ebedf0;
		border-radius: 6px;
		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
		padding: 10px 0;
		margin-top: -10px;
		margin-left: -10px;
		/* 向右移动100px */
		width: 100%;
		/* Ensure the menu is as wide as the trigger */
		z-index: 100;
	}

	.menu-item {
		padding: 12px 20px;
		font-size: 16px;
		color: #1c1c1c;
		cursor: pointer;
		transition: background-color 0.3s;
	}

	.icon-arrow {
		width: 15px;
		height: 15px;
		position: relative;
		top: 3px;
		left: -172px;
	}

	.overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 9999;
		/* 提高层级，确保覆盖其他元素 */
	}

	.action-modal {
		background-color: #fff;
		border-radius: 10px;
		width: 100%;
		/* max-width: 300px; 限制最大宽度 */
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		position: absolute;
		/* 使用绝对定位 */
		bottom: 0;
		/* 定位到屏幕底部 */
		left: 50%;
		/* 定位到屏幕左侧50% */
		transform: translateX(-50%);
		/* 水平居中 */
		z-index: 10000;
		/* 提高层级，确保弹出框在最上面 */
	}

	.action-modal-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		/* 水平居中 */
		justify-content: center;
		/* 垂直居中 */
		height: 100%;
	}

	.action-item {
		padding: 20px;
		width: 100%;
		text-align: center;
		border-bottom: 1px solid #ebebeb;
		cursor: pointer;
	}

	.action-item:last-child {
		border-bottom: none;
	}
</style>